<!-- author: xuett -->
<!-- date: 2025-07-07 16:06:18 -->
<!-- description:  -->
<template>
  <div class="chart-box">
    <v-chart ref="chart2" :option="chartOption" autoresize @mouseover="chart2Mouseover" @mouseout="chart2Mouseout" />
  </div>
</template>

<script setup>
import * as echarts from "echarts";

const state = reactive({
  card2Data: [
    {
      name: "规划里程",
      dataList: [
        { name: "合计", value: 8200 },
        { name: "主线", value: 6300 },
        { name: "支线", value: 1800 },
        { name: "连接线", value: 700 }
      ]
    },
    {
      name: "完成里程",
      dataList: [
        { name: "合计", value: 6500 },
        { name: "主线", value: 800 },
        { name: "支线", value: 900 },
        { name: "连接线", value: 400 }
      ]
    }
  ],
  chartOption: {},
  chart2Select: {
    isSet: false,
    currentIndex: 0
  }
});
const { chartOption } = toRefs(state);

onMounted(() => {
  initChart();
});

//完成情况
const chart2 = ref();
const initChart = () => {
  let colorList = [
    ["#3276E2", "#57B1EE"],
    ["#61AE64", "#87BF90"]
  ];
  state.chartOption = {
    title: {
      text: "公里",
      top: 0,
      left: 10,
      textStyle: {
        color: "#fff",
        fontSize: 12,
        fontWeight: "normal",
        fontFamily: "Alibaba"
      }
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      },
      borderColor: "#255DA9",
      backgroundColor: "#255DA9",
      textStyle: {
        color: "#fff",
        fontSize: 12
      }
    },
    grid: {
      top: "17%",
      right: "0",
      left: "12%",
      bottom: "10%"
    },
    legend: {
      top: 0,
      right: 0,
      itemGap: 20,
      data: state.card2Data.map((item) => item.name),
      textStyle: {
        color: "#fff"
      }
    },
    xAxis: {
      type: "category",
      axisLine: {
        lineStyle: {
          color: "#3C5787"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: "#fff",
        fontSize: 12
      },
      data: state.card2Data[0].dataList.map((item) => item.name)
    },
    yAxis: {
      axisLabel: {
        color: "#FFFFFF",
        fontSize: 12
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: "#B2C2D3",
          type: "dashed"
        }
      }
    },
    series: state.card2Data.map((item, index) => {
      return {
        name: item.name,
        type: "bar",
        barWidth: 16,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 0,
              color: colorList[index][1] //结束颜色
            },
            {
              offset: 1,
              color: colorList[index][0] // 起始颜色
            }
          ])
        },
        data: item.dataList.map((item) => item.value)
      };
    })
  };
  if (chart2Timer) {
    clearInterval(chart2Timer);
    chart2Timer = null;
  }
  chart2Timer = setInterval(chart2Hover, 1500);
};
var chart2Timer = null;
const chart2Mouseover = (param) => {
  state.chart2Select.isSet = false;
  if (chart2Timer) {
    clearInterval(chart2Timer);
    chart2Timer = null;
  }
  // 取消之前高亮的图形
  chart2.value.dispatchAction({
    type: "downplay",
    seriesIndex: 0,
    dataIndex: state.chart2Select.currentIndex
  });
  // 高亮当前图形
  chart2.value.dispatchAction({
    type: "highlight",
    seriesIndex: 0,
    dataIndex: param.dataIndex
  });
  // 显示 tooltip
  chart2.value.dispatchAction({
    type: "showTip",
    seriesIndex: 0,
    dataIndex: param.dataIndex
  });
  state.chart2Select.currentIndex = param.dataIndex;
};

// 3、自动高亮展示
const chart2Hover = function () {
  if (!chart2.value) {
    return;
  }
  var dataLen = state.chartOption.series[0].data.length;
  // 取消之前高亮的图形
  chart2.value.dispatchAction({
    type: "downplay",
    seriesIndex: 0,
    dataIndex: state.chart2Select.currentIndex
  });
  state.chart2Select.currentIndex = (state.chart2Select.currentIndex + 1) % dataLen;
  // 高亮当前图形
  chart2.value.dispatchAction({
    type: "highlight",
    seriesIndex: 0,
    dataIndex: state.chart2Select.currentIndex
  });
  // 显示 tooltip
  chart2.value.dispatchAction({
    type: "showTip",
    seriesIndex: 0,
    dataIndex: state.chart2Select.currentIndex
  });
};
//鼠标移出之后，恢复自动高亮
const chart2Mouseout = () => {
  if (!state.chart2Select.isSet) {
    if (chart2Timer) {
      clearInterval(chart2Timer);
      chart2Timer = null;
    }
    chart2Timer = setInterval(chart2Hover, 2000);
    state.chart2Select.isSet = true;
  }
};
</script>

<style scoped lang="scss">
.chart-box {
  width: 100%;
  height: 100%;
  padding: 15px;
  background-color: #000;
}
</style>
